<template>
  <div class="scroll" @scroll="getScroll($event)">
      <div ref="item1" :class="item1?'active':''">1</div>
      <div ref="item2" :class="item2?'active':''">2</div>
      <div ref="item3" :class="item3?'active':''">3</div>
      <div ref="item4" :class="item4?'active':''">4</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      item1:true,
      item2:false,
      item3:false,
      item4:false,
    }
  },
  methods:{
    getScroll(ev){
      var item1=this.$refs.item1;
      var item2=this.$refs.item2;
      var item3=this.$refs.item3;
      var item4=this.$refs.item4;
      var offsetHight1=item1.offsetTop;
      var offsetHight2=item2.offsetTop;
      var offsetHight3=item3.offsetTop;
      var offsetHight4=item4.offsetTop;
      var scroTop=ev.target.scrollTop;
      if (offsetHight1-scroTop<40){
        this.item1=true;
        this.item2=this.item3=this.item4=false;
      }
      if(offsetHight2-scroTop<40){
        this.item2=true;
        this.item1=this.item3=this.item4=false;
      }
      if(offsetHight3-scroTop<40){
        this.item3=true;
        this.item1=this.item2=this.item4=false;
      }
      if(offsetHight4-scroTop<40){
        this.item4=true;
        this.item1=this.item2=this.item3=false;
      }

    }
  }
}
</script>
<style>
.scroll{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: green;
}
.scroll>div{
  width: 100%;
  height: 300px;
  background: yellow;
  margin-bottom: 20px;
}

  .active{
    background: blue!important;
  }

</style>
